<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>v-for demo</title>
        <script src="../../lib/vue-dev/dist/vue.min.js"></script>
    </head>

    <body>
        <div id="app">
            <!-- <p v-for="item in list">{{ item }}</p>
            <p v-for="(item, i) in list">索引值:{{ i }} --- 每一项：{{item}}</p>
            <p v-for="(user, i) in list2">索引值:{{ i }} --- 每一项：id:{{user.id}} --- 名字:{{user.name}}</p>
            <p v-for="(key, value, i) in user">值是： {{value}} --- 键是: {{key}} --- 索引: {{i}}</p>
            <p v-for="count in 10">这是第 {{count}} 次循环</p> -->
            <div>
                <label>Id:<input type="text" v-model="id"></label>
                <label>Name:<input type="text" v-model="name"></label>
                <input type="button" value="添加" @click="add">
            </div>
            <p v-for="item in list3" :key="item.id">
                <input type='checkbox'>{{item.id}} --- {{item.name}}
            </p>
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    list: [1,2,3,4,5,6],
                    list2: [
                        {id:1, name: 'zs1'},
                        {id:2, name: 'zs2'},
                        {id:3, name: 'zs3'},
                        {id:4, name: 'zs4'},
                        {id:5, name: 'zs5'}
                    ],
                    user: {
                        id:1,
                        name: '托尼.史塔克',
                        gender: '男'
                    },
                    id: "",
                    name: "",
                    list3: [
                        {id:1, name:'李斯'},
                        {id:2, name:'嬴政'},
                        {id:3, name:'赵高'},
                        {id:4, name:'韩非'},
                        {id:5, name:'荀子'}
                    ]
                },
                methods: {
                    add() {
                        //this.list3.push({id: this.id, name: this.name});
                        this.list3.unshift({id: this.id, name: this.name});
                    }
                }
            });
        </script>
    </body>

</html>